<template>
  <div class="pay">
    <ul class="content-box">
      <li @click="goTraffic">
        <img src="../../static/traffic.png" alt />
        <p>店铺总客量</p>
      </li>
      <li @click="goCollect">
        <img src="../../static/collect.png" alt />
        <p>店铺收藏</p>
      </li>
      <li @click="goOrder">
        <img src="../../static/order.png" alt />
        <p>店铺下单数</p>
      </li>
      <li @click="goMyEarnings">
        <img src="../../static/earnings.png" alt />
        <p>我的收益</p>
      </li>
    </ul>
    <div class="body-box">
      <span>店铺列表</span>
    </div>
    <yd-pullrefresh :callback="loadList" ref="pullrefreshDemo">
      <yd-list theme="4">
        <yd-list-item v-for="(item, index) in list" :key="index">
          <img slot="img" :src="item.img" />
          <span slot="title">{{item.title}}</span>
          <yd-list-other slot="other">
            <div>
              <span class="list-price">
                <em>¥</em>
                {{item.marketprice}}
              </span>
              <span class="list-del-price">¥{{item.productprice}}</span>
            </div>
            <div>........</div>
          </yd-list-other>
        </yd-list-item>
      </yd-list>
    </yd-pullrefresh>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          img:
            "https://img.alicdn.com/imgextra/i4/99148408/O1CN01zdypIU2Byug7VOiWl_!!0-saturn_solar.jpg_220x220.jpg",
          title: "小寨西路*****",
          marketprice: 56.23,
          productprice: 89.36
        },
        {
          img:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1257663026,3688761797&fm=26&gp=0.jpg",
          title: "西大街1234",
          marketprice: 56.23,
          productprice: 89.36
        },
        {
          img:
            "https://img.alicdn.com/imgextra/i4/99148408/O1CN01zdypIU2Byug7VOiWl_!!0-saturn_solar.jpg_220x220.jpg",
          title: "回民街",
          marketprice: 56.23,
          productprice: 89.36
        },
        {
          img:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1257663026,3688761797&fm=26&gp=0.jpg",
          title: "兴庆公园",
          marketprice: 56.23,
          productprice: 89.36
        },
        {
          img:
            "https://img.alicdn.com/imgextra/i4/99148408/O1CN01zdypIU2Byug7VOiWl_!!0-saturn_solar.jpg_220x220.jpg",
          title: "钟楼",
          marketprice: 56.23,
          productprice: 89.36
        },
        {
          img:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1257663026,3688761797&fm=26&gp=0.jpg",
          title: "小烤肉",
          marketprice: 56.23,
          productprice: 89.36
        }
      ]
    };
  },
  methods: {
    submit() {},
    loadList() {
      const url = "http://list.ydui.org/getdata.php";

      this.$http
        .jsonp(url, { params: { type: "pulldown", page: this.page } })
        .then(response => {
          const _list = response.body;

          this.list = [..._list, ...this.list];

          this.$dialog.toast({
            mes:
              _list.length > 0
                ? "为您更新了" + _list.length + "条内容"
                : "已是最新内容"
          });

          this.$refs.pullrefreshDemo.$emit("ydui.pullrefresh.finishLoad");

          this.page++;
        });
    }
  }
};
</script>
<style scoped>
.pay {
  height: 100%;
  padding-top: 1rem;
  font-size: 0.32rem;
}
.body-box {
  border-bottom: 0.02rem solid #eee;
  padding: 0.3rem;
  text-align: left;
}

.logout-btn {
  height: 1rem;
  margin: 1.5rem 0 1rem;
}
.content-box {
  width: 100%;
  margin-top: 5px;
  background: #fff;
}
.content-box li {
  width: 48%;
  display: inline-block;
  height: 110px;
  border-radius: 5px;
  font-size: 0.32rem;
}
.content-box li img {
  width: 50%;
  height: 50%;
}
</style>